<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Mycar Web Controller</title>
    <script type="text/javascript">
        //https://github.com/bobboteck/JoyStick
        const JoyStick=function(t,e){var i=void 0===(e=e||{}).title?"joystick":e.title,n=void 0===e.width?0:e.width,o=void 0===e.height?0:e.height,r=void 0===e.internalFillColor?"#00AA00":e.internalFillColor,h=void 0===e.internalLineWidth?2:e.internalLineWidth,a=void 0===e.internalStrokeColor?"#003300":e.internalStrokeColor,d=void 0===e.externalLineWidth?2:e.externalLineWidth,f=void 0===e.externalStrokeColor?"#008000":e.externalStrokeColor,l=void 0===e.autoReturnToCenter||e.autoReturnToCenter,s=document.getElementById(t),c=document.createElement("canvas");c.id=i,0===n&&(n=s.clientWidth),0===o&&(o=s.clientHeight),c.width=n,c.height=o,s.appendChild(c);var u=c.getContext("2d"),g=0,v=2*Math.PI,p=(c.width-(c.width/2+10))/2,C=p+5,w=p+30,m=c.width/2,L=c.height/2,E=c.width/10,P=-1*E,S=c.height/10,k=-1*S,W=m,T=L;function G(){u.beginPath(),u.arc(m,L,w,0,v,!1),u.lineWidth=d,u.strokeStyle=f,u.stroke()}function x(){u.beginPath(),W<p&&(W=C),W+p>c.width&&(W=c.width-C),T<p&&(T=C),T+p>c.height&&(T=c.height-C),u.arc(W,T,p,0,v,!1);var t=u.createRadialGradient(m,L,5,m,L,200);t.addColorStop(0,r),t.addColorStop(1,a),u.fillStyle=t,u.fill(),u.lineWidth=h,u.strokeStyle=a,u.stroke()}"ontouchstart"in document.documentElement?(c.addEventListener("touchstart",function(t){g=1},!1),c.addEventListener("touchmove",function(t){t.preventDefault(),1===g&&t.targetTouches[0].target===c&&(W=t.targetTouches[0].pageX,T=t.targetTouches[0].pageY,"BODY"===c.offsetParent.tagName.toUpperCase()?(W-=c.offsetLeft,T-=c.offsetTop):(W-=c.offsetParent.offsetLeft,T-=c.offsetParent.offsetTop),u.clearRect(0,0,c.width,c.height),G(),x())},!1),c.addEventListener("touchend",function(t){g=0,l&&(W=m,T=L);u.clearRect(0,0,c.width,c.height),G(),x()},!1)):(c.addEventListener("mousedown",function(t){g=1},!1),c.addEventListener("mousemove",function(t){1===g&&(W=t.pageX,T=t.pageY,"BODY"===c.offsetParent.tagName.toUpperCase()?(W-=c.offsetLeft,T-=c.offsetTop):(W-=c.offsetParent.offsetLeft,T-=c.offsetParent.offsetTop),u.clearRect(0,0,c.width,c.height),G(),x())},!1),c.addEventListener("mouseup",function(t){g=0,l&&(W=m,T=L);u.clearRect(0,0,c.width,c.height),G(),x()},!1)),G(),x(),this.GetWidth=function(){return c.width},this.GetHeight=function(){return c.height},this.GetPosX=function(){return W},this.GetPosY=function(){return T},this.GetX=function(){return((W-m)/C*100).toFixed()},this.GetY=function(){return((T-L)/C*100*-1).toFixed()},this.GetDir=function(){var t="",e=W-m,i=T-L;return i>=k&&i<=S&&(t="C"),i<k&&(t="N"),i>S&&(t="S"),e<P&&("C"===t?t="W":t+="W"),e>E&&("C"===t?t="E":t+="E"),t}};
    </script>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row justify-content-md-center">
        <div class="col-md-8">
            <h5 class="mt-5">Camera:</h5>
            <img src="{{ url_for('video_feed') }}" width="100%">
        </div>
    </div>

    <div class="row justify-content-md-center">
        <div class="col col-md-4">
            <div id="joyLeft" style="width:150px;height:200px;"></div>
        </div>
        <div class="col col-md-4">
            <div id="joyRight" style="width:150px;height:200px;"></div>
        </div>
    </div>

    <div class="row justify-content-md-center">
        <div class="col col-md-4">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="autonomous">
                <label class="form-check-label" for="autonomous">Autonomous Mode</label>
            </div>
        </div>
        <div class="col col-md-4">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="record">
                <label class="form-check-label" for="record">Record Video</label>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
var joyLeft = new JoyStick('joyLeft');

var joyRightParam = { "title": "joyRight", "autoReturnToCenter": true};
var joyRight = new JoyStick('joyRight', joyRightParam);

var joyLeftX = 0;
var joyLeftY = 0;
var joyRightX = 0;
var joyRightY = 0;

setInterval(function() {
    var x = joyLeft.GetX();
    var y = joyLeft.GetY();
    var changed = false;

    if (x != joyLeftX || y != joyLeftY) {
        joyLeftX = x;
        joyLeftY = y;
        changed = true;
        console.log('joyLeft x: ' + joyLeftX);
        console.log('joyLeft y: ' + joyLeftY);
    }

    x = joyRight.GetX();
    y = joyRight.GetY();

    if (x != joyRightX || y != joyRightY) {
        joyRightX = x;
        joyRightY = y;
        changed = true;
        console.log('joyRight x: ' + joyRightX);
        console.log('joyRight y: ' + joyRightY);
    }

    if (changed) {
        $.get('/control?steer=' + joyLeftX + '&throttle=' + joyRightY);
    }
}, 20);

$('#autonomous').change(function(e) {
    var auto = $('#autonomous').is(':checked');
    console.log('autonomous: ' + auto);

    $.get('/control?auto=' + auto);
});

$('#record').change(function(e) {
    var record = $('#record').is(':checked');
    console.log('record: ' + record);

    $.get('/control?record=' + record);
});
</script>
</html>